<template>
    <div id="bond-List" style="height: calc(100% - 10px)">
        <!-- 搜索框 -->
        <el-form label-width="80px" style="display: block; height: 162px">
            <el-row class="search-box">
                <el-col>
                    <el-form-item class="col1-width bondTypeItem" label="债券类别" prop="bondType">
                        <span
                            class="option-span"
                            :key="spanKey"
                            :class="{ 'span-checked': bondTypeAllSelect == true }"
                            @click="selectAllSpan($event, 'bondType')"
                            >全部</span
                        >
                        <span
                            class="option-span"
                            :class="{ 'span-checked': item.checked == true }"
                            v-for="item in state.bondType"
                            :key="item.dictKey + 'bondTypeSelect'"
                            @click="clickSpan('bondType', item.dictKey)"
                            >{{ item.dictKeyName }}</span
                        >
                    </el-form-item>
                    <el-form-item class="col1-width issueTermItem" label="发行期限">
                        <span class="option-span" :class="{ 'span-checked': issueTermAllSelect === true }" @click="selectAllSpan($event, 'issueTerm')"
                            >全部</span
                        >

                        <span
                            class="option-span"
                            :class="{ 'span-checked': item.checked === true }"
                            v-for="item in state.issueTerm"
                            :key="item.dictKey"
                            @click="clickSpan('issueTerm', item.dictKey)"
                            >{{ item.dictKeyName }}</span
                        >
                    </el-form-item>
                    <el-form-item class="col1-width BidDateRangeItem" label="招标日期" prop="BidDateRange">
                        <el-date-picker
                            v-model="primaryBondListMsg.BidDateRange"
                            type="daterange"
                            value-format="yyyyMMdd"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            size="small"
                            @change="handleDataRange($event, 'BidStartDate', 'BidEndDate')"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="col1-width" label="证券代码" prop="bondCode">
                        <el-select
                            name="bondCode"
                            v-model="primaryBondListMsg.submit.bondCode"
                            filterable
                            clearable
                            remote
                            :remote-method="getBondCodeList"
                            :loading="selectLoading"
                            @change="handleBondCodeList"
                            size="mini"
                            multiple
                            collapse-tags
                            @visible-change="handleBondVisibleChange"
                        >
                            <el-option
                                v-for="item in bondCodeSelectData"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                                :name="'bondCode' + item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="企业性质" class="col2-width issueNatureItem">
                        <span
                            class="option-span"
                            :class="{ 'span-checked': issueNatureAllSelect === true }"
                            @click="selectAllSpan($event, 'issueNature')"
                            >全部</span
                        >
                        <span
                            class="option-span"
                            :class="{ 'span-checked': item.checked === true }"
                            v-for="item in state.issueNature"
                            :key="item.dictKey"
                            @click="clickSpan('issueNature', item.dictKey)"
                            >{{ item.dictKeyName }}</span
                        >
                    </el-form-item>
                    <el-form-item label="主体评级" class="col2-width compGradeItem">
                        <span class="option-span" :class="{ 'span-checked': compGradeAllSelect === true }" @click="selectAllSpan($event, 'compGrade')"
                            >全部</span
                        >
                        <span
                            class="option-span"
                            :class="{ 'span-checked': item.checked === true }"
                            v-for="item in state.compGrade"
                            :key="item.dictKey + 'c'"
                            @click="clickSpan('compGrade', item.dictKey)"
                            >{{ item.dictKeyName }}</span
                        >
                        <!-- <RiskCustomSelect
                :selectKeys="primaryBondListMsg.submit.compGrade"
                :dataSource="state.compGrade"
                showSelectAll="true"
                :showSearch="state.compGrade && state.compGrade.length != 0"
                @customSelectReturn="customSelectReturn($event, 'compGrade')"
              ></RiskCustomSelect> -->
                    </el-form-item>
                    <el-form-item class="col2-width payDateRangeItem" label="缴款日期" prop="payDateRange">
                        <el-date-picker
                            v-model="primaryBondListMsg.payDateRange"
                            type="daterange"
                            value-format="yyyyMMdd"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            size="small"
                            @change="handleDataRange($event, 'payDateStart', 'payDateEnd')"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="发行人" class="col2-width" prop="issueCode">
                        <el-select
                            name="issueCode"
                            v-model="primaryBondListMsg.submit.issueCode"
                            filterable
                            clearable
                            remote
                            :remote-method="getIssueCodeList"
                            :loading="selectLoading"
                            @change="handleIssueCodeList"
                            size="mini"
                            multiple
                            collapse-tags
                        >
                            <el-option
                                v-for="item in issueCodeSelectData"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                                :name="'issueCode' + item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="日期筛选" class="col3-width dateTypeItem">
                        <span class="option-span" :class="{ 'span-checked': dateTypeAllSelect == true }" @click="selectAllSpan($event, 'dateType')"
                            >全部</span
                        >
                        <span
                            class="option-span"
                            :class="{ 'span-checked': item.checked === true }"
                            v-for="item in state.dateType"
                            :key="item.dictKey"
                            @click="clickSpan('dateType', item.dictKey)"
                            >{{ item.dictKeyName }}</span
                        >
                    </el-form-item>

                    <div class="col3-width1 label">
                        <el-form-item label="招标标的" style="width: 170px">
                            <el-select name="bidSubject" v-model="primaryBondListMsg.submit.bidSubject" size="mini" style="width: 88px">
                                <el-option value="" label=""></el-option>
                                <el-option value="1" label="利率" name="bidSubject1"></el-option>
                                <el-option value="3" label="价格" name="bidSubject3"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 招标标的空 -->
                        <el-form-item
                            class="long-label"
                            v-if="!primaryBondListMsg.submit.bidSubject"
                            key="none"
                            label="利率/价格区间"
                            style="width: 285px"
                        >
                            <el-input
                                class="input-suffix1"
                                type="number"
                                :title="primaryBondListMsg.submit.bidSectionLower"
                                v-model="primaryBondListMsg.submit.bidSectionLower"
                                @change="handleSectionChange"
                                size="mini"
                            >
                                <template slot="append">{{ appendText }}</template>
                            </el-input>
                            <span class="connect-line"></span>
                            <el-input
                                class="input-suffix1"
                                type="number"
                                :title="primaryBondListMsg.submit.bidSectionUpper"
                                v-model="primaryBondListMsg.submit.bidSectionUpper"
                                @change="handleSectionChange"
                                size="mini"
                            >
                                <template slot="append">{{ appendText }}</template>
                            </el-input>
                        </el-form-item>
                        <!-- 招标标的为利率 -->
                        <el-form-item
                            v-else-if="primaryBondListMsg.submit.bidSubject == '1'"
                            key="rate"
                            :label="primaryBondListMsg.submit.bidSubject == '1' ? '利率区间' : '利率/价格区间'"
                            style="width: 285px"
                        >
                            <el-input
                                class="input-suffix1"
                                type="number"
                                v-model="primaryBondListMsg.submit.bidSectionLower"
                                size="mini"
                                @change="handleSectionChange"
                            >
                                <template slot="append">{{ appendText }}</template>
                            </el-input>
                            <span class="connect-line"></span>
                            <el-input
                                class="input-suffix1"
                                type="number"
                                v-model="primaryBondListMsg.submit.bidSectionUpper"
                                size="mini"
                                @change="handleSectionChange"
                            >
                                <template slot="append">{{ appendText }}</template>
                            </el-input>
                        </el-form-item>
                        <!-- 招标标的为价格 -->
                        <el-form-item
                            v-else
                            key="price"
                            :label="primaryBondListMsg.submit.bidSubject == '3' ? '价格区间' : '利率/价格区间'"
                            style="width: 300px"
                        >
                            <el-input-number
                                class="input-suffix"
                                controls-position="right"
                                step-strictly
                                v-model="primaryBondListMsg.submit.bidSectionLower"
                                size="mini"
                                :min="1"
                                @change="handleSectionChange"
                            >
                            </el-input-number>
                            <div class="suffix-box">元</div>
                            <span class="connect-line"></span>
                            <el-input-number
                                class="input-suffix"
                                step-strictly
                                controls-position="right"
                                v-model="primaryBondListMsg.submit.bidSectionUpper"
                                size="mini"
                                :min="1"
                                @change="handleSectionChange"
                            >
                            </el-input-number>
                            <div class="suffix-box">元</div>
                        </el-form-item>
                    </div>
                    <el-form-item label="上市日期" class="col3-width listDateRangeItem" prop="listDateRange">
                        <el-date-picker
                            v-model="primaryBondListMsg.listDateRange"
                            type="daterange"
                            value-format="yyyyMMdd"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            size="small"
                            @change="handleDataRange($event, 'listDateStart', 'listDateEnd')"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item class="label">
                        <div style="display: flex; padding-top: 5px;">
                            <el-button @click="getPrimaryBondList" type="primary" size="mini">查询</el-button>
                            <el-button @click="resetForm" type="primary" size="mini">重置</el-button>
                        </div>
                        <div>
                            <el-button type="primary" size="mini" @click="layoutDialog = true" icon="el-icon-setting">布局设置</el-button>
                        </div>
                    </el-form-item> -->
                    <el-form-item class="label isBidItem">
                        <div style="display: flex">
                            <el-checkbox v-model="primaryBondListMsg.submit.isBid" style="margin-right: 10px" size="mini">
                                仅显示可投标债券
                            </el-checkbox>
                            <el-button @click="getPrimaryBondList" type="primary" style="height: 30px; margin-top: 5px" size="mini">查询 </el-button>
                            <el-button @click="resetForm" type="primary" style="height: 30px; margin-top: 5px" size="mini">重置 </el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="operate-box" style="margin-top: 10px; height: 38px">
            <el-button type="primary" size="mini" @click="getPrimaryBondList">刷新</el-button>
            <el-button type="primary" size="mini" @click="openDialog({}, 'add')">新增债券</el-button>
            <el-button type="danger" size="mini" @click="openDelDialog">删除债券</el-button>
            <el-button style="float: right" type="primary" size="mini" @click="layoutDialog = true" icon="el-icon-setting">布局设置</el-button>
        </div>

        <!-- 表格 -->
        <el-row class="table-box" style="height: calc(100% - 210px)">
            <div style="height: calc(100% - 60px)">
                <vxe-table
                    ref="table"
                    :key="bondDataNumKey + 'bondDataNumKey'"
                    :data="bondData"
                    v-loading="loading"
                    :row-config="{ isHover: true }"
                    :sort-config="{
                        defaultSort: { field: sortProp, order: sortOrder, orders: ['DESC', 'ASC', null] },
                        remote: true,
                    }"
                    resizable
                    :resizable-config="{ minWidth: '55' }"
                    :filter-config="{ remote: true }"
                    :checkbox-config="{
                        checkMethod: ({ row }) => {
                            return row.bondUpdateType == '1';
                        },
                    }"
                    height="100%"
                    @filter-change="handleFilter"
                    @sort-change="changeTableSort"
                    @checkbox-change="handleSelectionChange"
                    highlight-hover-row
                    show-header-overflow
                    header-align="center"
                    auto-resize
                    stripe
                    border
                >
                    <!-- <vxe-column type="selection" :selectable="handleCheckSelectable" width="55"> </vxe-column> -->
                    <vxe-column type="checkbox" width="55" fixed="left" align="center"></vxe-column>
                    <vxe-column title="操作" min-width="150" width="150" fixed="left" show-overflow>
                        <template #default="{ row }">
                            <el-button type="text" size="small" @click="openBidDialog(row)" :disabled="row.isBid != '1'">投标 </el-button>
                            <!-- <el-button type="text" size="small" @click="openBidDialog(scope.row)" :disabled="scope.row.isBid != '1'">投标 </el-button> -->
                            <el-button
                                type="text"
                                v-if="row.bondUpdateType == '1'"
                                size="small"
                                @click="openDialog(row, 'updateBond')"
                                :disabled="row.updatable != '0'"
                                >修改债券</el-button
                            >
                            <el-button v-else type="text" size="small" @click="openDialog(row, 'updateBid')" :disabled="row.updatable != '0'"
                                >修改标位</el-button
                            >
                        </template>
                    </vxe-column>
                    <!-- <template v-for="(item, index) in showFieldList"> -->
                    <vxe-column
                        v-for="(item, index) in showFieldList"
                        :field="item.id"
                        :title="item.content"
                        :key="index"
                        :filters="item.filters"
                        :min-width="item.minWidth || '80px'"
                        :fixed="item.fixed"
                        show-overflow="tooltip"
                        sortable
                    >
                        <template slot="header">
                            <span>{{ item.content }}</span>
                        </template>
                        <template slot-scope="scope">
                            <span v-if="item.id === 'bondNameSt'" style="cursor: pointer; color: #409eff" @click="openDialog(scope.row, 'look')">
                                {{ scope.row.bondNameSt }}
                            </span>

                            <span v-else-if="item.id === 'bidSubject'">{{ scope.row.bidSubject ? bidSubjectPojo[scope.row.bidSubject] : '--' }}</span>

                            <span v-else-if="item.id == 'bidRemainTime'" style="display: block; text-align: center">
                                {{
                                    scope.row.isBid == '1'
                                        ? scope.row.bidRemainTime
                                        : scope.row.isBid == '2'
                                        ? '投标未开始'
                                        : scope.row.isBid == '3'
                                        ? '投标已截止'
                                        : '--'
                                }}
                            </span>

                            <span v-else-if="item.id === 'bidStartDate'" style="display: block; text-align: center">{{
                                formatterDate(scope.row.bidStartDate)
                            }}</span>

                            <span v-else-if="item.id === 'bidEndDate'" style="display: block; text-align: center">{{
                                formatterDate(scope.row.bidEndDate)
                            }}</span>

                            <span v-else-if="item.id === 'payDate'" style="display: block; text-align: center">{{
                                formatterDate(scope.row.payDate)
                            }}</span>

                            <span v-else-if="item.id === 'listDate'" style="display: block; text-align: center">{{
                                formatterDate(scope.row.listDate)
                            }}</span>

                            <span v-else-if="item.id === 'compGrade'">
                                <span v-if="scope.row.compGrade && scope.row.debtRating">{{ scope.row.compGrade + '/' + scope.row.debtRating }}</span>
                                <span v-else-if="scope.row.compGrade && !scope.row.debtRating">{{ scope.row.compGrade + '/' + '空' }}</span>
                                <span v-else-if="!scope.row.compGrade && scope.row.debtRating">{{ '空' + '/' + scope.row.debtRating }}</span>
                                <span v-else>{{ '--' }}</span>
                            </span>
                            <span v-else-if="item.id === 'totalBalance'" style="float: right">
                                {{ scope.row[item.id] != undefined ? numberFormat(scope.row[item.id], 2) : '--' }}</span
                            >
                            <span v-else-if="item.id === 'issueNature'">{{ dataRander(scope.row) }}</span>
                            <span v-else-if="item.id === 'bondType'">{{ StockTypePojo[scope.row[item.id]] }}</span>
                            <span v-else-if="item.id === 'bidSection'">
                                <span v-if="scope.row.bidSectionLower || scope.row.bidSectionUpper">
                                    <span v-if="scope.row.bidSubject == '1'">{{
                                        (scope.row.bidSectionLower ? numberFormat(scope.row.bidSectionLower, 2) : '--') +
                                        '%' +
                                        ' - ' +
                                        (scope.row.bidSectionUpper ? numberFormat(scope.row.bidSectionUpper, 2) : '--') +
                                        '%'
                                    }}</span>
                                    <span v-else-if="scope.row.bidSubject == '3'">{{
                                        (scope.row.bidSectionLower ? numberFormat(scope.row.bidSectionLower, 2) : '--') +
                                        '元' +
                                        ' - ' +
                                        (scope.row.bidSectionUpper ? numberFormat(scope.row.bidSectionUpper, 2) : '--') +
                                        '元'
                                    }}</span>
                                    <span v-else>--</span>
                                </span>
                                <span v-else>--</span>
                            </span>

                            <span v-else>{{
                                scope.row[item.id] === 0 || (scope.row[item.id] && (scope.row[item.id] + '').trim()) ? scope.row[item.id] : '--'
                            }}</span>
                        </template>
                    </vxe-column>
                    <!-- </template> -->
                </vxe-table>
            </div>
            <div class="block">
                <risk-pagination :paging="bondPage" @page-change="queryBondList"></risk-pagination>
            </div>
        </el-row>

        <RiskTableLayout
            title="页面布局"
            :visible.sync="layoutDialog"
            :field-list="tableColumns"
            :selected-field-list="selectedFieldList"
            :fixed-field-list="fixedFieldList"
            table-name="PRIMARY_BOND"
            @on-submit="onSubmit"
        />

        <!-- 删除债券 -->
        <yh-dialog
            drag
            title="确定删除以下债券吗?"
            width="50%"
            custom-class="menu-dialog-height"
            :visible.sync="delDialog"
            :close-on-click-modal="false"
        >
            <div>
                <span>{{ handleSplitBond(selectionList) }}</span>
                <!-- <span v-for="(item, index) in selectionList" :key="index"> {{ item.bondCode + '(' + item.bondNameSt + ')' + ',' }}</span> -->
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="delDialog = false"> 取 消</el-button>
                <el-button size="mini" @click="handleDelBond"> 确 定</el-button>
            </div>
        </yh-dialog>

        <BondDetail
            style="width: 75%"
            v-if="bondDetailVisible"
            :bondDetailVisible="bondDetailVisible"
            :row="bondDetailInfo"
            :type="type"
            @closeBondDetailDialog="closeBondDetailDialog"
            @getPrimaryBondList="getPrimaryBondList"
        />

        <!-- <yh-dialog
            drag
            :title="dialogTitle"
            width="75%"
            custom-class="menu-dialog-height"
            :visible.sync="bondDetailVisible"
            :close-on-click-modal="false"
        >
            <BondDetail v-if="bondDetailVisible" :row="bondDetailInfo" :type="type" />
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeBondDetailDialog"> 取 消</el-button>
                <el-button v-show="type !== 'look'" size="mini"> 重 置 </el-button>
                <el-button v-show="type !== 'look'" size="mini" type="primary" @click="closeBondDetailDialog"> 确 认 </el-button>
            </div>
        </yh-dialog> -->
        <BidDetail :bidDetailShow="bidDetailShow" :rowData="BidDetailRowData" @bidDetailReturn="bidDetailReturn" v-if="bidDetailShow"></BidDetail>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import RiskCustomSelect from '@/common/components/risk-custom-select.vue';
import { DateUtils, DialogVO } from '@yhfin/biz';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import draggable from 'vuedraggable';
import BondDetail from '../primarybond-bid/bond-detail.vue';
import BidDetail from './bid-detail.vue';
import { dateFormat, numberFormat } from '@/utils/tools';
import RiskTableLayout from '@/common/components/risk-table-layout.vue';
import RiskPagination from '@/common/components/risk-pagination.vue';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';

// export interface pages {
//     total?: number;
//     pageSize?: number;
//     currentPage?: number;
// }
@Component({
    name: 'PrimaryBondTable',
    components: { RiskCustomSelect, draggable, BondDetail, RiskIconButton, BidDetail, RiskTableLayout, RiskPagination },
})
export default class PrimaryBondTable extends Vue {
    numberFormat = numberFormat;
    bidSubjectPojo: any = {
        '1': '利率',
        '3': '价格',
    };
    // 一级债券列表相关
    primaryBondListMsg = {
        // 上市日期区间
        listDateRange: [],
        // 缴款日期区间
        payDateRange: [],
        // 发行日期区间
        BidDateRange: [],
        // 需要提交的数据
        submit: {
            //   bondType: ['-1'],
            //   issueNature: ['-1'],
            //   dateType: ['-1'],
            //   issueTerm: ['-1'],
            //   compGrade: ['-1'],
            bondType: [],
            issueNature: [],
            dateType: [],
            issueTerm: [],
            compGrade: [],
            bondCode: [],
            // '111884534 YH', '167254 SS'
            issueCode: [],
            isBid: true,
            payDateStart: 0,
            payDateEnd: 0,
            listDateStart: 0,
            listDateEnd: 0,
            BidStartDate: 0,
            BidEndDate: 0,
            sort: '',
            bidSubject: '',
            bidSectionLower: undefined,
            bidSectionUpper: undefined,
            // paging: { total: 0, currentPage: 1, pageSize: 25 },
        },
    };
    private bondDetailInfo: any = {}; // 债券详情弹框传参
    private bondData: any[] = []; // 表格数据
    loading: boolean = false;
    // 投标详情
    private bidDetailShow: boolean = false;
    // 投标行
    private BidDetailRowData: any = {};
    // 布局
    private showLayout: any[] = [];
    private layoutDialog: boolean = false;
    private notShowLayout: any[] = [];
    private drag: boolean = false;

    private sortProp: string = ''; // 排序字段

    private sortOrder: string = ''; // 排序方式

    private selectLoading: boolean = false; // 下拉框远程搜索时的加载状态

    private bondCodeSelectData: any[] = []; // 债券代码下拉框数据

    private issueCodeSelectData: any[] = []; // 发行人代码下拉框数据

    private bondPage = {
        total: 0,
        currentPage: 1,
        pageSize: 25,
    };

    state = {
        // 企业性质下拉
        issueNature: [
            { dictKey: '001001', dictKeyName: '国有', checked: false },
            { dictKey: '001002', dictKeyName: '民营', checked: false },
            { dictKey: '001006', dictKeyName: '中资', checked: false },
            { dictKey: '002001', dictKeyName: '外资', checked: false },
            { dictKey: '003001', dictKeyName: '中外合资', checked: false },
            { dictKey: '!', dictKeyName: '其他', checked: false },
        ],
        // 债券类别下拉
        bondType: [
            { dictKey: '1', dictKeyName: '利率债', checked: false },
            { dictKey: '2', dictKeyName: '信用债', checked: false },
        ],
        // 日期筛选
        dateType: [
            // { dictKey: '1', dictKeyName: '今日发行', checked: false },
            // { dictKey: '2', dictKeyName: '明日发行', checked: false },
            { dictKey: '3', dictKeyName: '今日缴款', checked: false },
            { dictKey: '4', dictKeyName: '今日上市', checked: false },
        ],
        // 发行期限
        issueTerm: [
            { dictKey: '1', dictKeyName: '≤1年', checked: false },
            { dictKey: '2', dictKeyName: '1~3年(含)', checked: false },
            { dictKey: '3', dictKeyName: '3~5年(含)', checked: false },
            { dictKey: '4', dictKeyName: '5~7年(含)', checked: false },
            { dictKey: '5', dictKeyName: '7~10年(含)', checked: false },
            { dictKey: '6', dictKeyName: '＞10年', checked: false },
        ],
        // 主体评级
        compGrade: [
            { dictKey: '1', dictKeyName: 'AAA', checked: false },
            { dictKey: '3', dictKeyName: 'AA+', checked: false },
            { dictKey: '4', dictKeyName: 'AA', checked: false },
            { dictKey: '5', dictKeyName: 'AA-', checked: false },
            { dictKey: '!', dictKeyName: '其他', checked: false },
        ],
        // 证券代码
        bondCode: [],
        // 发行人
        issueCode: [],
    };
    bondDetailVisible: boolean = false;
    renderPrimaryBondNum: any;
    renderPrimaryBondIssueNum: any;

    bondTypeAllSelect: boolean = true;
    issueNatureAllSelect: boolean = true;
    dateTypeAllSelect: boolean = true;
    issueTermAllSelect: boolean = true;
    compGradeAllSelect: boolean = true;

    bondTypeSelect: any[] = [];
    issueNatureSelect: any[] = [];
    dateTypeSelect: any[] = [];
    issueTermSelect: any[] = [];
    compGradeSelect: any[] = [];

    spanKey: number = 0;
    private bondDataNumKey: number = -1; // 表格渲染key

    // 已选择字段列表
    selectedFieldList: any[] = [];
    // 固定字段列表
    fixedFieldList: any[] = [
        { content: '债券简称', id: 'bondNameSt', minWidth: '110px', fixed: 'left' },
        { content: '债券代码', id: 'bondCode', minWidth: '110px', fixed: 'left' },
        { content: '投标开始日期', id: 'bidStartDate', minWidth: '140px' },
        { content: '投标截止日', id: 'bidEndDate', minWidth: '130px' },
    ];

    private showFieldList: any[] = []; // 要显示的表格列

    // 全部表格列
    private tableColumns: any[] = [
        { content: '债券简称', id: 'bondNameSt', minWidth: '140px', fixed: 'left' },
        { content: '债券代码', id: 'bondCode', minWidth: '110px', fixed: 'left' },
        { content: '投标开始日期', id: 'bidStartDate', minWidth: '140px' },
        { content: '投标截止日', id: 'bidEndDate', minWidth: '130px' },
        { content: '投标剩余时间', id: 'bidRemainTime', minWidth: '130px' },
        { content: '交易市场', id: 'marketName', minWidth: '110px' },
        { content: '招标标的', id: 'bidSubject', minWidth: '110px' },
        { content: '投标区间', id: 'bidSection', minWidth: '130px' },

        { content: '缴款日期', id: 'payDate', minWidth: '110px' },
        { content: '上市日期', id: 'listDate', minWidth: '110px' },
        { content: '发行规模(亿)', id: 'totalBalance', minWidth: '130px' },
        { content: '债券类别', id: 'bondType', minWidth: '110px' },
        { content: '发行人', id: 'issueName', minWidth: '110px' },
        { content: '发行人性质', id: 'issueNature', minWidth: '130px' },
        { content: '信用评级(主体/债券)', id: 'compGrade', minWidth: '180px' },
    ];
    type: string = ''; // 操作类型（新增、修改或查看）
    selectionList: any[] = []; // 表格选中
    delDialog: boolean = false;

    submitForm: any = {
        auth: true,
        bidEndDate: 0,
        bidEndTime: 0,
        bidMode: '',
        bidNo: '',
        bidRemainTime: '',
        bidSection: '',
        bidSectionLower: '',
        bidSectionUpper: '',
        bidStartDate: 0,
        bidStartTime: 0,
        bidSubject: '',
        bidType: '',
        bidingTime: 0,
        bondCode: '',
        bondNameSt: '',
        bondType: '',
        bondUpdateType: '',
        compGrade: '',
        compInnerGrade: '',
        debtInnerRating: '',
        debtRating: '',
        direactUser: '',
        directDate: 0,
        directTime: 0,
        duwrtName: '',
        duwrtName1: [],
        duwrtName2: [],
        duwrtName3: [],
        duwrtType: '',
        enDate: 0,
        fundCode: '',
        fundName: '',
        fundNameSt: '',
        gradeComp: '',
        inStDate: 0,
        inType: '',
        instBalance: 0,
        instNo: '',
        instPrice: 0,
        instructionStatus: '',
        isBid: '',
        issueCode: '',
        issueName: '',
        issueNature: '',
        issueTerm: '',
        issueType: '',
        listDate: 0,
        localCustodian: '',
        marketCode: '',
        marketName: '',
        originOuterOrderCode: '',
        payDate: 0,
        payType: '',
        paymentMode: '',
        productCode: '',
        publishDate: 0,
        ratingOutlook: '',
        serialNo: 0,
        summary: '',
        tenderWay: '',
        totalBalance: 0,
        yearRate: 0,
    };
    StockTypePojo: any = {};

    // beforeUpdate() {
    //     this.$nextTick(() => {
    //         // 在数据加载完，重新渲染表格
    //         (this.$refs['table'] as any).doLayout();
    //     });
    // }

    async mounted() {
        // 债券代码下拉框数据源
        this.getBondCodeList('');
        this.getIssueCodeList('');
        this.queryLayout();
        this.queryBondList();
        // 获取所有证券类别 (用于筛选订单方向)
        this.StockTypePojo = DictionConstUtil.ListToPojo(await DictionConstUtil.FNStockType());
        // this.allStockTypePojo = await SGU_CACHE('StockType', '/dict/stockType/list', []);
    }

    get dialogTitle() {
        if (this.type == 'add') {
            return '新增债券';
        } else if (this.type == 'updateBid') {
            return '修改投标区间';
        } else if (this.type == 'updateBond') {
            return '修改债券信息';
        } else if (this.type == 'look') {
            return '债券详情';
        }
    }

    // 获取区间输入框后缀文本
    get appendText() {
        let bidObject = this.primaryBondListMsg.submit.bidSubject;
        if (!bidObject) {
            return '%/元';
        } else {
            if (bidObject == '1') {
                return '%';
            } else {
                return '元';
            }
        }
    }

    handleSectionChange() {
        // if (this.primaryBondListMsg.submit.bidSectionUpper && this.primaryBondListMsg.submit.bidSectionLower) {
        //     if (Number(this.primaryBondListMsg.submit.bidSectionLower) > Number(this.primaryBondListMsg.submit.bidSectionUpper)) {
        //         this.primaryBondListMsg.submit.bidSectionLower = undefined;
        //         this.primaryBondListMsg.submit.bidSectionUpper = undefined;
        //         this.yh_message_warn('区间下限不能大于区间上限，请重新输入！');
        //     }
        // }
    }

    private handleFilter(column: any): void {}

    changeColWidth(nw, ow, col, evt) {
        let widthTable = parseInt((document.querySelector('.el-table') as any).offsetWidth);
        let realWidth = (col.minWidth * widthTable) / 100;
        if (nw > realWidth + 20) {
            col.width = realWidth + 20;
        } else if (nw < 70) {
            col.width = 70;
        } else {
            col.width = realWidth;
        }
    }

    selectAllSpan(e, type) {
        if (type === 'bondType') {
            this.bondTypeAllSelect = !this.bondTypeAllSelect;
            if (this.bondTypeAllSelect) {
                this.state.bondType.forEach(ele => {
                    ele.checked = false;
                });
                this.primaryBondListMsg.submit.bondType = ['-1'];
            }
        } else if (type == 'issueNature') {
            this.issueNatureAllSelect = !this.issueNatureAllSelect;
            if (this.issueNatureAllSelect) {
                this.state.issueNature.forEach(ele => {
                    ele.checked = false;
                });
                this.primaryBondListMsg.submit.issueNature = ['-1'];
            }
        } else if (type == 'issueTerm') {
            this.issueTermAllSelect = !this.issueTermAllSelect;
            if (this.issueTermAllSelect) {
                this.state.issueTerm.forEach(ele => {
                    ele.checked = false;
                });
                this.primaryBondListMsg.submit.issueTerm = ['-1'];
            }
        } else if (type == 'dateType') {
            this.dateTypeAllSelect = !this.dateTypeAllSelect;
            if (this.dateTypeAllSelect) {
                this.state.dateType.forEach(ele => {
                    ele.checked = false;
                });
                this.primaryBondListMsg.submit.dateType = ['-1'];
            }
        } else if (type == 'compGrade') {
            this.compGradeAllSelect = !this.compGradeAllSelect;
            if (this.compGradeAllSelect) {
                this.state.compGrade.forEach(ele => {
                    ele.checked = false;
                });
                this.primaryBondListMsg.submit.compGrade = ['-1'];
            }
        }
    }

    clickSpan(type, dictKey) {
        console.log(dictKey);
        if (type === 'bondType') {
            this.bondTypeSelect = [];
            this.state.bondType.forEach(ele => {
                if (ele.dictKey === dictKey) {
                    ele.checked = !ele.checked;
                }
                if (ele.checked) {
                    this.bondTypeSelect.push(ele.dictKey);
                }
            });
            // this.state.bondType.forEach((ele) => {
            //   if (ele.checked) {
            //     this.bondTypeSelect.push(ele.dictKey);
            //   }
            // });
            // this.bondTypeAllSelect = false;
            if (this.bondTypeSelect.length) {
                this.bondTypeAllSelect = false;
            } else {
                this.bondTypeAllSelect = true;
            }
            // this.$set(this, 'bondTypeAllSelect', false);
            // this.spanKey++;
            this.primaryBondListMsg.submit.bondType = JSON.parse(JSON.stringify(this.bondTypeSelect));
        } else if (type === 'issueNature') {
            this.issueNatureSelect = [];
            this.state.issueNature.forEach(ele => {
                if (ele.dictKey === dictKey) {
                    ele.checked = !ele.checked;
                }
            });
            this.state.issueNature.forEach(ele => {
                if (ele.checked) {
                    this.issueNatureSelect.push(ele.dictKey);
                }
            });
            if (this.issueNatureSelect.length) {
                this.issueNatureAllSelect = false;
            } else {
                this.issueNatureAllSelect = true;
            }
            // this.issueNatureAllSelect = false;
            this.primaryBondListMsg.submit.issueNature = JSON.parse(JSON.stringify(this.issueNatureSelect));
        } else if (type === 'dateType') {
            this.dateTypeSelect = [];
            this.state.dateType.forEach(ele => {
                if (ele.dictKey === dictKey) {
                    ele.checked = !ele.checked;
                }
            });
            this.state.dateType.forEach(ele => {
                if (ele.checked) {
                    this.dateTypeSelect.push(ele.dictKey);
                }
            });
            if (this.dateTypeSelect.length) {
                this.dateTypeAllSelect = false;
            } else {
                this.dateTypeAllSelect = true;
            }
            // this.dateTypeAllSelect = false;
            this.primaryBondListMsg.submit.dateType = JSON.parse(JSON.stringify(this.dateTypeSelect));
        } else if (type === 'compGrade') {
            this.compGradeSelect = [];
            this.state.compGrade.forEach(ele => {
                if (ele.dictKey === dictKey) {
                    ele.checked = !ele.checked;
                }
            });
            this.state.compGrade.forEach(ele => {
                if (ele.checked) {
                    this.compGradeSelect.push(ele.dictKey);
                }
            });
            if (this.compGradeSelect.length) {
                this.compGradeAllSelect = false;
            } else {
                this.compGradeAllSelect = true;
            }
            // this.compGradeAllSelect = false;
            this.primaryBondListMsg.submit.compGrade = JSON.parse(JSON.stringify(this.compGradeSelect));
        } else if (type === 'issueTerm') {
            this.issueTermSelect = [];
            this.state.issueTerm.forEach(ele => {
                if (ele.dictKey === dictKey) {
                    ele.checked = !ele.checked;
                }
            });
            this.state.issueTerm.forEach(ele => {
                if (ele.checked) {
                    this.issueTermSelect.push(ele.dictKey);
                }
            });
            if (this.issueTermSelect.length) {
                this.issueTermAllSelect = false;
            } else {
                this.issueTermAllSelect = true;
            }
            // this.issueTermAllSelect = false;
            this.primaryBondListMsg.submit.issueTerm = JSON.parse(JSON.stringify(this.issueTermSelect));
        }
        //
    }

    // 获取页面布局信息
    async queryLayout() {
        this.loading = true;
        let resList: any = await new Promise((resolve, reject) => {
            this.$axios('/tableLayout/query/PRIMARY_BOND')
                .then((res: any) => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
        if (resList) {
            this.selectedFieldList = JSON.parse(resList);
            this.showFieldList = this.uniqueFunc(this.fixedFieldList.concat(this.selectedFieldList), 'id');
        } else {
            let keys = this.fixedFieldList.map(item => item.id);
            this.selectedFieldList = this.tableColumns.filter(item => !keys.includes(item.id));
            this.showFieldList = this.tableColumns;
        }
        this.loading = false;
    }

    // 数组去重
    uniqueFunc(arr, uniId) {
        const res = new Map();
        return arr.filter(item => !res.has(item[uniId]) && res.set(item[uniId], 1));
    }

    /**
     * 提交成功后回调
     * @param {Object} 回调数据
     */
    async onSubmit(data) {
        console.log('固定字段', data.fixed);
        console.log('选中字段', data.selected);
        await this.queryLayout();
    }

    // 获取债券代码下拉框数据
    getBondCodeList(e: string) {
        this.selectLoading = true;
        this.$axios
            .post('/dict/bond/select', {
                dictKey: e,
                dictKeyName: e,
            })
            .then((res: any) => {
                this.bondCodeSelectData = res || [];
                if (this.bondCodeSelectData.length > 0) {
                    this.bondCodeSelectData.unshift({
                        dictKey: '-1',
                        dictKeyName: '全部选择',
                    });
                }
                this.selectLoading = false;
            });
    }

    // 获取发行人代码下拉框数据
    getIssueCodeList(e: string) {
        this.selectLoading = true;
        this.$axios
            .post('/dict/issue/select', {
                dictKey: e,
                dictKeyName: e,
            })
            .then((res: any) => {
                this.issueCodeSelectData = res || [];
                if (this.issueCodeSelectData.length > 0) {
                    this.issueCodeSelectData.unshift({
                        dictKey: '-1',
                        dictKeyName: '全部选择',
                    });
                }
                this.selectLoading = false;
            });
    }

    // 处理债券代码下拉框数据
    handleIssueCodeList(list: any) {
        if (list.length > 0) {
            if (list[0] == '-1' && list.length > 1) {
                this.yh_message_warn('全选后不能勾选其他的数据');
                this.primaryBondListMsg.submit.issueCode = ['-1'];
            } else if (list[list.length - 1] == '-1' && list.length > 1) {
                this.primaryBondListMsg.submit.issueCode = ['-1'];
                this.yh_message_info('已全选');
            }
        }
    }

    handleBondVisibleChange(state: boolean) {
        if (!state) {
            this.getBondCodeList('');
        }
    }

    // 处理发行人代码下拉框数据
    handleBondCodeList(list: any) {
        if (list.length > 0) {
            if (list[0] == '-1' && list.length > 1) {
                this.yh_message_warn('全选后不能勾选其他的数据');
                this.primaryBondListMsg.submit.bondCode = ['-1'];
            } else if (list[list.length - 1] == '-1' && list.length > 1) {
                this.primaryBondListMsg.submit.bondCode = ['-1'];
                this.yh_message_info('已全选');
            }
        }
    }

    // 债券详情
    openDialog(row, type: string) {
        this.type = type;
        this.bondDetailInfo = JSON.parse(JSON.stringify(row));
        this.bondDetailVisible = true;
    }

    // 投标页面
    private openBidDialog(row: any): void {
        console.log(row, 'row');

        this.BidDetailRowData = JSON.parse(JSON.stringify(row));
        this.bidDetailShow = true;
    }

    // 投标返回操作
    private bidDetailReturn(type): void {
        this.bidDetailShow = false;
        if (type === 'order') {
            this.getPrimaryBondList();
        }
    }

    private dataRander(row) {
        switch (row.issueNature) {
            case '001001':
                return '国有企业';
            case '001002':
                return '民营企业';
            case '001006':
                return '中资企业';
            case '002001':
                return '外资企业';
            case '003001':
                return '中外合资企业';
            default:
                return '其他';
        }
    }

    //  一级债券列表
    private queryBondList(): void {
        this.loading = true;
        this.$axios
            .post('/primaryBond/list', {
                ...this.primaryBondListMsg.submit,
                paging: {
                    currentPage: this.bondPage.currentPage,
                    pageSize: this.bondPage.pageSize,
                },
            })
            .then((res: any) => {
                console.log(res.list);
                this.bondData = res.list;
                this.bondPage.total = res.total;
                this.loading = false;
                // this.bondDataNumKey++;
            })
            .catch(e => {
                console.log(e);
                this.loading = false;
            });
    }

    // 排序改变
    private changeTableSort(column: any): void {
        // this.sortProp = column.prop;
        // this.sortOrder = column.order;
        // let sortType = column.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : '';
        // this.primaryBondListMsg.submit.sort = this.findName(column.prop, sortType);
        const { order, property } = column;
        this.sortProp = property;
        this.sortOrder = order;
        console.log(order, property, 'order, property');

        let sortType = order == 'asc' ? 'ASC' : order == 'desc' ? 'DESC' : '';
        this.primaryBondListMsg.submit.sort = this.findName(property, sortType);
        this.queryBondList();
    }

    formatterDate(date) {
        return dateFormat(date) || '--';
    }

    // 获取排序字段名称
    private findName(name: string, order: string): string {
        let value = '';
        switch (name) {
            // 15
            case 'bondNameSt':
                value = 'C_BOND_NAME_ST' + ' ' + order;
                break;
            case 'bondCode':
                value = 'C_BOND_CODE' + ' ' + order;
                break;
            case 'bidRemainTime':
                value = 'isBid' + ' ' + order;
                value = 'D_BIDCLOSE_DATE' + ' ' + order + ',' + 'D_BIDCLOSE_DATE' + ' ' + order;
                break;
            case 'marketName':
                value = 'C_MARKET_NAME' + ' ' + order;
                break;
            case 'bidSubject':
                value = 'C_BIDOBJECT' + ' ' + order;
                break;
            case 'bidSection':
                value = 'C_BID_SECTION' + ' ' + order;
                break;
            case 'bidStartDate':
                value = 'D_BIDSTART_DATE' + ' ' + order;
                break;
            case 'bidEndDate':
                value = 'D_BIDCLOSE_DATE' + ' ' + order;
                break;
            case 'payDate':
                value = 'D_PAYDATE' + ' ' + order;
                break;
            case 'listDate':
                value = 'D_LIST_DATE' + ' ' + order;
                break;
            case 'totalBalance':
                value = 'N_TOTAL_BALANCE' + ' ' + order;
                break;
            case 'bondType':
                value = 'C_BOND_TYPE' + ' ' + order;
                break;
            case 'compGrade':
                value = 'C_ISSUE_GRADE' + ' ' + order + ',' + 'C_BOND_GRADE' + ' ' + order;
                break;
            case 'issueName':
                value = 'C_ISSUE_NAME' + ' ' + order;
                break;
            case 'issueNature':
                value = 'C_ISSUE_TYPE3' + ' ' + order;
                break;
        }
        return value;
    }

    // 查询债券列表
    private getPrimaryBondList() {
        if (this.primaryBondListMsg.submit.bidSectionUpper && this.primaryBondListMsg.submit.bidSectionLower) {
            if (Number(this.primaryBondListMsg.submit.bidSectionLower) > Number(this.primaryBondListMsg.submit.bidSectionUpper)) {
                this.primaryBondListMsg.submit.bidSectionLower = undefined;
                this.primaryBondListMsg.submit.bidSectionUpper = undefined;
                this.yh_message_warn('区间下限不能大于区间上限，请重新输入！');
                return;
            }
        }
        this.loading = true;
        this.$axios
            .post('/primaryBond/list', {
                ...this.primaryBondListMsg.submit,
                paging: {
                    currentPage: 1,
                    pageSize: 30,
                },
            })
            .then((res: any) => {
                this.bondData = res.list;
                this.bondPage.total = res.total;
                this.loading = false;
            })
            .catch(e => {
                console.log(e);
                this.loading = false;
                this.bondData = [];
                this.bondPage.total = 0;
            });
    }

    private closeBondDetailDialog() {
        this.bondDetailVisible = false;
    }

    private handleDataRange(dateRange: any, key1: string, key2: string): void {
        if (dateRange) {
            this.primaryBondListMsg.submit[key1] = dateRange[0];
            this.primaryBondListMsg.submit[key2] = dateRange[1];
        } else {
            this.primaryBondListMsg.submit[key1] = 0;
            this.primaryBondListMsg.submit[key2] = 0;
        }
    }

    // 重置查询表单
    private resetForm() {
        this.primaryBondListMsg.BidDateRange = [];
        this.primaryBondListMsg.listDateRange = [];
        this.primaryBondListMsg.payDateRange = [];

        this.primaryBondListMsg.submit.BidStartDate = 0;
        this.primaryBondListMsg.submit.BidEndDate = 0;
        this.primaryBondListMsg.submit.listDateStart = 0;
        this.primaryBondListMsg.submit.listDateEnd = 0;
        this.primaryBondListMsg.submit.payDateStart = 0;
        this.primaryBondListMsg.submit.payDateEnd = 0;

        this.primaryBondListMsg.submit.bondCode = [];
        this.primaryBondListMsg.submit.issueCode = [];
        this.primaryBondListMsg.submit.isBid = true;
        this.primaryBondListMsg.submit.bidSubject = '';
        this.primaryBondListMsg.submit.bidSectionLower = undefined;
        this.primaryBondListMsg.submit.bidSectionUpper = undefined;

        this.bondTypeAllSelect = true;
        this.issueNatureAllSelect = true;
        this.dateTypeAllSelect = true;
        this.issueTermAllSelect = true;
        this.compGradeAllSelect = true;

        this.state.bondType.forEach(ele => {
            ele.checked = false;
        });

        this.state.issueNature.forEach(ele => {
            ele.checked = false;
        });
        this.state.dateType.forEach(ele => {
            ele.checked = false;
        });
        this.state.issueTerm.forEach(ele => {
            ele.checked = false;
        });
        this.state.compGrade.forEach(ele => {
            ele.checked = false;
        });
        this.primaryBondListMsg.submit.bondType = [];
        this.primaryBondListMsg.submit.issueNature = [];
        this.primaryBondListMsg.submit.issueTerm = [];
        this.primaryBondListMsg.submit.dateType = [];
        this.primaryBondListMsg.submit.compGrade = [];
    }

    onStart() {
        this.drag = true;
    }

    // 拖拽结束事件
    onEnd() {
        this.drag = false;
    }

    // 多选框返回值
    private customSelectReturn(value: any[], name: string): void {
        switch (name) {
            case 'bondType':
                this.primaryBondListMsg.submit.bondType = value;
                break;
            case 'issueNature':
                this.primaryBondListMsg.submit.issueNature = value;
                break;
            case 'issueTerm':
                this.primaryBondListMsg.submit.issueTerm = value;
                break;
            case 'compGrade':
                this.primaryBondListMsg.submit.compGrade = value;
                break;
            case 'bondCode':
                this.primaryBondListMsg.submit.bondCode = value;
                break;
            case 'issueCode':
                this.primaryBondListMsg.submit.issueCode = value;
                break;
            case 'dateType':
                this.primaryBondListMsg.submit.dateType = value;
                break;
        }
    }

    // 设置表格行勾选状态
    private handleCheckSelectable(row, index) {
        if (row.bondUpdateType == '1') {
            return true;
        } else {
            return false;
        }
    }

    // 获取表格选中
    private handleSelectionChange(list: any) {
        this.selectionList = list.selection.map(ele => {
            return { bondCode: ele.bondCode, bondNameSt: ele.bondNameSt };
        });
    }

    private openDelDialog() {
        if (!this.selectionList.length) {
            this.yh_message_warn('请先勾选要删除的债券！');
            return;
        }
        this.delDialog = true;
    }

    // 刷新
    // private handleRefresh() {}

    // 债券操作
    private handleOperateBond() {
        let message: string = '';
        if (this.type == 'add') {
            delete this.submitForm.bondUpdateType;
            message = '新增成功';
        } else if (this.type == 'updateBond') {
            this.submitForm.bondUpdateType = '1';
            message = '修改债券成功';
        } else if (this.type == 'updateBid') {
            this.submitForm.bondUpdateType = '2';
            message = '修改标位成功';
        }

        this.$axios
            .post('/primaryBond/bondOperate', this.submitForm)
            .then(res => {
                this.yh_message_success(message);
                this.getPrimaryBondList();
            })
            .catch(() => {});
    }

    handleSplitBond(bondList: any) {
        let showBondStr = '';
        for (let index = 0; index < bondList.length; index++) {
            showBondStr += bondList[index].bondCode + '(' + bondList[index].bondNameSt + ')' + ',';
        }
        showBondStr = showBondStr.substr(0, showBondStr.length - 1);
        return showBondStr;
    }

    // // 新增债券
    // private handleAddBond() {
    //     delete this.submitForm.bondUpdateType;
    // }

    // // 修改债券/标位
    // private handleUpdateBond(row: any) {
    //     this.submitForm.bondUpdateType = row.bondUpdateType;
    // }

    // 删除债券
    private handleDelBond() {
        let bondCodes = this.selectionList.map(ele => ele.bondCode);
        this.$axios
            .post('/primaryBond/deleteBond', bondCodes)
            .then(res => {
                this.yh_message_success('删除成功！');
                this.delDialog = false;
                this.getPrimaryBondList();
                this.selectionList = [];
            })
            .catch(() => {
                this.delDialog = false;
            });
    }
}
</script>

<style lang="scss" scoped>
.label {
    /deep/ .el-form-item__content {
        margin-left: 17px !important;
    }
}
.long-label {
    width: 305px !important;
    /deep/ .el-form-item__label {
        width: 100px !important;
    }
}
.input-suffix {
    width: 70px;
    display: inline-flex;
}

.input-suffix1 {
    width: 90px;
    display: inline-flex;
}
.suffix-box {
    display: inline-block;
    width: 30px;
    text-align: center;
    height: 28px;
    line-height: 25px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    margin-left: -2px;
    background: #f3f6fe;
    color: #575757;
}
// /deep/.el-input__icon {
//     line-height: 42px !important;
// }
/deep/.el-input-number--mini .el-input-number__decrease,
/deep/.el-input-number--mini .el-input-number__increase {
    width: 24px !important;
    right: -1px !important;
}

/deep/.el-input-number.is-controls-right .el-input__inner {
    padding-left: 10px;
    padding-right: 30px;
}

.connect-line {
    width: 9px;
    display: inline-block;
    height: 1.5px;
    background: #575757;
    margin: 0 5px;
    vertical-align: middle;
}

/deep/.el-input-group {
    vertical-align: middle !important;
}
/deep/ .el-input-group__append {
    padding: 0 18px;
    line-height: 25px;
    display: flex;
    justify-content: center;
}

.span-checked {
    display: inline-block;
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    background-color: #2288ff !important;
    color: white !important;
}

.col1-width {
    // width: 33.3vw;
    width: 555px;

    .el-date-editor,
    .el-select {
        width: 250px;
    }
}

.col2-width {
    // width: 33.3vw;
    width: 410px;

    .el-date-editor,
    .el-select {
        width: 250px;
    }
}

.col3-width,
.col3-width1 {
    // width: 33.3vw;
    width: 410px;

    .el-date-editor,
    .el-select {
        width: 250px;
    }
}

.col3-width1 {
    display: flex;
    width: 480px;
    /deep/.el-input__inner {
        padding: 0 10px;
    }
}

#bond-List {
    overflow: auto;
    width: calc(100vw - 22px);
    // width: fit-content;
    // padding: 10px;
    .search-box {
        border-bottom: 1px solid #c9c9c9;
        overflow-x: auto;
        display: flex;

        .el-form-item {
            margin-bottom: 0px;
            // width: fit-content;
        }

        .el-col {
            .option-span {
                cursor: pointer;
                margin-right: 5px;
                color: #717171;
                background-color: #ebebeb;
                height: 22px;
                line-height: 22px;
                padding: 0 5px;
            }
        }
    }

    .table-box {
        height: fit-content;
        border: 1px solid #c9c9c9;
        padding-top: 5px;

        /deep/ .el-table {
            th {
                padding: 5px 0 !important;
                background-color: #e8f3ff !important;

                .cell {
                    //   min-width: 30px;
                    white-space: nowrap; /* 文本在一行显示，不换行 */
                    text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。*/
                    overflow: hidden; /* 超出部分隐藏 */
                }
            }
        }
    }

    & /deep/ .menu-dialog-height {
        margin-top: 5vh !important;

        .el-dialog__body {
            max-height: 90vh;
            overflow: scroll;

            &::-webkit-scrollbar {
                width: 8px !important;
                height: 4px !important;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #727272;
                border-radius: 0px;
            }
        }
    }

    .el-col-8 {
        padding: 0 10px;

        .el-form-item {
            // margin-bottom: 10px !important;
            /deep/ .el-form-item__label {
                padding-right: 5px !important;
            }
        }

        /deep/ .el-checkbox__label {
            color: #222 !important;
        }
    }

    // .checkBox-item {
    //     // /deep/.el-form-item__content {
    //     //   margin-left: 5px !important;
    //     // }
    // }
}
// 解决yhbiz 100% 造成的拖动列错位 待测试 测试通过可全局
/deep/ .vxe-table .vxe-table--header {
    width: 10px !important;
}

.title,
.content {
    border: 1px solid #d7d7d7;
    padding: 5px 10px;
}

.content {
    height: 300px;
}

.item {
    // height: 30px;
    padding: 5px;
    margin: 4px 2px;
    display: inline-block;
    border: 1px dashed #1890ff;
    border-radius: 3px;
}

/deep/ .el-range-editor.is-active,
.el-range-editor.is-active:hover {
    border-color: #107fff;
}

/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;

    .el-select__tags-text {
        display: inline-block;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
